<template>
  <div>
    <el-button
      type="primary"
      class="el-icon-plus"
      :disabled="!category3Id"
      @click="$emit('setShow', false)"
    >
      添加属性
    </el-button>

    <el-table :data="attrList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column label="属性名称" prop="attrName"> </el-table-column>
      <el-table-column label="属性列表" prop="attrValueList">
        <template v-slot="{ row }">
          <el-tag
            class="attr-tag"
            type="success"
            v-for="value in row.attrValueList"
            :key="value.id"
            >{{ value.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-tooltip content="修改属性" placement="top">
            <el-button
              type="warning"
              class="el-icon-edit"
              size="min"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除属性" placement="top">
            <el-button
              type="danger"
              class="el-icon-delete"
              @click="delAttr($index)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { reqAttrInfoList } from "@/api/production/attr";
export default {
  name: "AttrList",
  data() {
    return {
      attrList: [],
    };
  },
  computed: {
    ...mapState("category", ["category1Id", "category2Id", "category3Id"]),
  },
  methods: {
    async getAttrInfoList() {
      // 监视如果第三个有值则发送请求
      let { category1Id, category2Id, category3Id } = this;
      let res = await reqAttrInfoList({
        category1Id,
        category2Id,
        category3Id,
      });
      this.attrList = res;
    },
    // 删除
    delAttr($index) {},
  },
  watch: {
    // 为啥我的不刷新页面 用v-if 重新加载页面不太好
    category3Id: {
      handler(val) {
        if (!val) return;
        this.getAttrInfoList();
      },
      immediate: true,
    },
  },
};
</script>

<style lang='sass' scoped>
.attr-tag
  margin: 0 10px
</style>